<template>
	<view :class="['cu-modal',{'show':popShow}]" @click="handlePopHide">
		<view class="cu-dialog" @click.stop="dropShow=false">
			<view class="flex padding">
				<view class="flex align-center">
					<image class="poster margin-right" :src="popData.img" mode=""></image>
				</view>
				<view class="flex justify-between info list">
					<view class="text-left">
						{{popData.name}}
						<view class="margin-tb-xs">{{popData.french}}</view>
						<text class="text-price">
							{{popData.list[dropIdx].price}}
						</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding tn-border-solids-top">
				规格选择
				<view class="drop-cont" @click.stop="dropShow=true">
					{{popData.list[dropIdx].spec}}
					（{{popData.list[dropIdx].weight}}）- 
					{{popData.list[dropIdx].edible}}
					<view class="drop-list" v-if="dropShow">
						<view 
							class="padding-sm" 
							v-for="(item,index) in popData.list"
							@click.stop="handleDropList(index)"
							:class="index==dropIdx?'bg-gray':''"
						>
							{{item.spec}}({{item.weight}}) - {{item.edible}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding tn-border-solids-top">
				数量选择
				<tn-number-box v-model="num" :min="1"></tn-number-box>
			</view>
			<view class="flex btn-cont" @click="handlePopHide">
				<view class="padding-sm bg-brown">
					取消
				</view>
				<view class="padding-sm bg-yellow" @click="handleAdd">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"cart-pop",
		data() {
			return {
				num:1,
				dropShow:false,
				dropIdx:0
			};
		},
		computed: {
			popShow() {
				return this.$store.state.cart.popShow 
			},
			popData(){
				return this.$store.state.cart.popData
			},
			editIdx(){
				return this.$store.state.cart.editIdx
			}
		},
		// watch:{
		// 	editIdx(){
		// 		//编辑触发的弹窗，初始化其规格下标、数量
		// 		if(this.editIdx!=-1){
		// 			let {dropIdx,num} = this.popData
		// 			this.dropIdx = dropIdx
		// 			this.num = num
		// 		}else{
		// 			//商品列表触发弹窗
		// 			this.dropIdx=0
		// 			this.num=1
		// 		}
		// 	}
		// },
		updated() {
			console.log('pop组件的update执行了');
			//编辑触发的弹窗，初始化其规格下标、数量
			if(this.editIdx!=-1){
				let {dropIdx,num} = this.popData
				this.dropIdx = dropIdx
				this.num = num
			}
			// if(this.editIdx==-1&&!this.dropShow){
			// 	//商品列表触发弹窗
			// 	this.dropIdx=0
			// 	this.num=1
			// }
		},
		methods: {
			handlePopHide() {
				this.$store.commit('cart/popShowMut',false)
				this.dropIdx=0
				this.num=1
				this.dropShow = false
			},
			handleDropList(idx){
				console.log(111);
				this.dropShow = false
				this.dropIdx = idx
			},
			handleAdd(){
				let {popData,dropIdx,num} = this
				this.$store.commit('cart/cartAddMut',{
					...popData,
					dropIdx,
					num,
					ischeck:true
				})
			}
		},
	}
</script>

<style lang="scss">
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		// text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.flex.align-end{
	min-width: 210upx;
}
.btn-cont {
	view{
		width: 50%;
	}
}
.drop-cont{
	position: relative;
	padding-left: 80upx;
	.drop-list{
		position: absolute;
		top: 50upx;
		right: 0;
		box-shadow:  0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 2;
		background-color: #fff;
	}
}
.cu-dialog{
	overflow: visible;
}
</style>